<template>
  <view class="app-container">
    <view class="flex-1 p-40" style="overflow-y: auto">
      <template v-if="store.state.deliver.list.length">
        <view
          class="deliver"
          style="border-radius: 10rpx; margin-bottom: 20rpx"
          v-for="(deliver, index) in store.state.deliver.list"
          :key="index"
          @click="handleToDeliverForm(deliver.id)"
        >
          <view style="position: relative; padding: 20rpx">
            <view class="dot">门店地址</view>
            <u-text
              type="info"
              :text="`${deliver.province.name} ${deliver.city.name} ${deliver.district.name}`"
              size="12"
            ></u-text>
            <u-gap height="5"></u-gap>
            <u-text :text="deliver.address" size="16"></u-text>
            <u-gap height="5"></u-gap>
            <u-text
              :text="deliver.name + ' ' + deliver.phone"
              size="14"
            ></u-text>
          </view>
          <view
            style="border-top: 1px solid #f0f0f0; padding: 10rpx"
            class="flex justify-between"
          >
            <view>
              <u-checkbox-group :model-value="checked">
                <u-checkbox
                  :disabled="deliver.is_default"
                  :name="deliver.id"
                  shape="circle"
                  label="默认收货地址"
                  @change="handleSwitchDefaultDeliver(deliver)"
                ></u-checkbox>
              </u-checkbox-group>
            </view>
            <view @click.stop="handleDelDeliver(deliver)">
              <u-icon name="trash-fill" color="error" size="18"></u-icon>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <my-empty text="暂无收货地址，请添加"></my-empty>
      </template>
    </view>
    <view class="p-40">
      <u-button
        shape="circle"
        type="primary"
        text="添加收货地址"
        @click="handleToDeliverForm(undefined)"
      ></u-button>
    </view>
  </view>
</template>

<script setup>
import { onHide, onShow } from "@dcloudio/uni-app";
import { useStore } from "vuex";
import { ref } from "vue";

const store = useStore();

const checked = ref([]);

function handleToDeliverForm(id) {
  console.log(id);
  const params = {};
  params.type = id ? "edit" : "add";
  if (id) {
    params.id = id;
  }
  console.log(params);
  uni.$u.route({
    url: "/pages/user/deliver/form",
    params,
  });
}

function handleDelDeliver(e) {
  if (e.is_default) {
    return uni.$u.toast("不能删除默认收货地址");
  }
  uni.showModal({
    title: "提示",
    content: "是否继续删除该收货地址",
    success: (res) => {
      if (res.confirm) {
        store.dispatch("fetchDelDeliver", e.id);
      }
    },
  });
}

async function handleSwitchDefaultDeliver(e) {
  await store.dispatch("fetchEditDeliver", {
    ...e,
    province: e.province.id,
    city: e.city.id,
    district: e.district.id,
    is_default: true,
  });
  checked.value = [e.id];
}

onShow(async () => {
  await store.dispatch("fetchDeliverList");
  checked.value.push(store.getters.defaultDeliver.id);
});

onHide(() => {
  checked.value = [];
});
</script>

<style lang="scss" scoped>
.deliver {
  background-color: #fff;
  .dot {
    position: absolute;
    top: 10rx;
    right: 20rpx;
    background-color: #e25c22;
    color: #fff;
    border-radius: 10rpx;
    padding: 0 10rpx;
    font-size: 24rpx;
  }
}
</style>
